import React from "react";
import { Col } from "antd/lib";
import { CheckedIcon, ConfigContainer, ContentWrapper, ItemTitle // ItemTitle,
, ItemWrapper, Title } from "./index.style"; //

var NumberMap = ["样式一", "样式二", "样式三", "样式四"];
/**
 * 配置项组件
 * @param {string | ReactNode} title
 * @param {Array} items
 * @param {number} defaultSelected
 * @param {function} onChange
 * @param simple
 * @param style
 * @param className
 * @param selectable
 * @param disabledItems
 * @param cols
 * @returns {*}
 */

var ConfigItem = function ConfigItem(_ref) {
  var title = _ref.title,
      items = _ref.items,
      defaultSelected = _ref.defaultSelected,
      onChange = _ref.onChange,
      style = _ref.style,
      className = _ref.className,
      selectable = _ref.selectable,
      _ref$disabledItems = _ref.disabledItems,
      disabledItems = _ref$disabledItems === void 0 ? [] : _ref$disabledItems,
      _ref$cols = _ref.cols,
      cols = _ref$cols === void 0 ? 4 : _ref$cols,
      showTitle = _ref.showTitle;

  // const [selected, setSelected] = useState(defaultSelected);
  var handleSelect = function handleSelect(index, e) {
    if (Array.from(e.target.classList).some(function (v) {
      return v.match("ant");
    })) {
      return;
    }

    if (disabledItems[index]) {
      return;
    } // setSelected(index);


    onChange(index);
  }; // useEffect(() => {
  //   const index = disabledItems.findIndex(v => !v);
  //   // eslint-disable-next-line no-unused-expressions
  //   index > -1 && setSelected(index);
  // }, [disabledItems]);


  return React.createElement(ConfigContainer, {
    style: style || {},
    className: className || ""
  }, title && React.createElement(Title, null, title), React.createElement(ContentWrapper, {
    className: "config-content"
  }, items.map(function (item, index) {
    return (// eslint-disable-next-line react/no-array-index-key
      React.createElement(Col, {
        span: 24 / cols,
        className: "item-outer-wrapper",
        key: index
      }, React.createElement(ItemWrapper, {
        onClick: function onClick(e) {
          return handleSelect(index, e);
        },
        className: "config-item-wrapper ".concat(index === defaultSelected ? "selected" : "", " ").concat(disabledItems[index] ? "item-disabled" : "")
      }, showTitle && React.createElement(ItemTitle, {
        className: "config-item-title"
      }, NumberMap[index]), item.render && item.render, defaultSelected === index && selectable && React.createElement(CheckedIcon, {
        className: "check-icon"
      })), item.bottomTitle && React.createElement("p", {
        className: "bottom-title"
      }, item.bottomTitle))
    );
  })));
};

ConfigItem.defaultProps = {
  title: "",
  items: [],
  onChange: function onChange() {},
  defaultSelected: 0,
  selectable: true
};
export default ConfigItem;
